<template>
  <div class="content-list">
    <ul class="section-content">
      <li class="content-item" v-for="(item,index) in contentList" :key="index">
        <div class="kuo" @click="goAlbum(item,item.name)">
          <img class="item-img" :src="attachImage(item, item.modifyCount)"> <!---->
          <div class="mask">
            <svg class="icon">
              <use xlink:href="#icon-bofang"></use>
            </svg>
          </div>
        </div>
        <p class="item-name" style="display: inline">{{dateDeal(item.createTime)}}</p>
        <el-tag>识别中</el-tag>
        <!--
        <p class="item-name" style="display: inline">更新时间: {{dateDeal(item.updateTime)}}</p>
        <p class="item-name" style="display: inline;color: #3FFFE2">更新次数: {{item.modifyCount}}</p>
        -->
      </li>
    </ul>
  </div>
</template>
<script>
  import {mixin} from '../mixins';

  export default {
    name: 'details-list',
    mixins: [mixin],
    props: ['contentList'],
    methods: {
      goAlbum(item, type) {  // 暂时 没用，后续可以写 小图的详细信息页面
        this.$store.commit("setTempList", item);
        if (!type) {                   //歌手
          this.$router.push({path: `identify-album/${item.id}`});
        }
      },
      attachImage(item, type) {  // 1331410855077634048  // 1331622087491629056
        if (!type) {
          return this.attachImageUrl(`/identify/get_pic/${item.id}`);
        } else {                      //歌单
          return this.attachImageUrl(`/identify-details/get_pic/${item.id}`);
        }
      },
      dateDeal(utc_datetime){
        //2020-11-30T11:14:37.456
        // 转为正常的时间格式 年-月-日 时:分:秒
        if (utc_datetime){
        let T_pos = utc_datetime.indexOf('T');
        let Z_pos = utc_datetime.indexOf('.');
        // let Z_pos = utc_datetime.length;
        let year_month_day = utc_datetime.substr(0,T_pos);
        let hour_minute_second = utc_datetime.substr(T_pos+1,Z_pos-T_pos-1);
        return year_month_day+" "+hour_minute_second; // 2017-03-31 08:02:06
        }else {
          return utc_datetime;
        }
      }
    }
  }
</script>
<style lang="scss" scoped>
  @import '../assets/css/content-list.scss';
</style>
